<!--El-容器组件-->
<template>
  <div>
    <el-container>
      <!-- 侧边栏  -->
      <el-aside width="200px">
        <el-menu>
          <el-menu-item index="1">用户管理</el-menu-item>
          <el-menu-item index="2">车辆管理</el-menu-item>
          <el-menu-item index="3">围栏管理</el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧主体内容 -->
      <el-container>
        <el-header>
          <h1 style="background-color: #0aa1ed;color:#fff;">智慧车辆运营系统-IVOS</h1>
        </el-header>
        <el-main>
          <el-table :data="arr">
            <el-table-column type="index" label="编号" align="center" width="80"></el-table-column>
            <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
            <el-table-column prop="model" label="型号" align="center"></el-table-column>
            <el-table-column prop="license" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="color" label="颜色" align="center"></el-table-column>
            <el-table-column prop="km" label="里程数" align="center"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";

const arr = ref([
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
]);
</script>

<style scoped>
</style>